import React, { Component } from 'react';
import {
    Text, View, ScrollView, TouchableOpacity, AppRegistry
} from 'react-native';
import TestFunctionUtils from '../util/TestFunctionUtils';
import Echarts from 'native-echarts';

import Head from './layout/Head';
import styles from '../../assets/css/style.js';
import GlobalConfig from '../util/Global';
const rem = GlobalConfig.WIDTH / 7.5;

/**
 * 测试功能
 */
export default class DataFlowView extends Component {
    constructor(props){
        super(props);
        this.state = {
            language:"密钥",
            channel:"2.4GHZ",
            power:"畅通",
            text:null,
            apple:[2, 4, 7, 2, 2, 7, 13, 16],
            organ: [6, 9, 9, 2, 8, 7, 17, 18]
        };
    }
    render(){
        const {navigate} = this.props.navigation;
        const lists=[["首 页", "icon_in", GlobalConfig.LOGIN_VIEW], 
                     ["测试功能", "icon_cs", GlobalConfig.TESTING_VIEW], 
                     ["状态查看", "icon_ck", GlobalConfig.STATUS_CHECK_VIEW], 
                     ["设 置", "icon_sz", GlobalConfig.SETTING_VIEW]];
        const option = {
            title:{
                show:false
            },
            backgroundColor:"#124191",
            //点击某一个点的数据的时候，显示出悬浮窗
            tooltip : {
                trigger: 'axis'
            },
            //图例组件
            legend: {
                show:false
            },
            //网格位置
            grid:{
                top:.34*rem,
                bottom:.68*rem,
                left:0,
                right:0,
                containLabel:false
            },
            //工具
            toolbox: {
                //改变icon的布局朝向
                //orient: 'vertical',
                show : false,
                showTitle:true,
                feature : {
                    //show是否显示表格，readOnly是否只读
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        //折线图  柱形图    总数统计 分开平铺
                        type: ['line', 'bar','stack','tiled']
                    }
                }
            },
            xAxis : [
                {
                    show:false,
                    //就是一月份这个显示为一个线段，而不是数轴那种一个点点
                    type : 'category',
                    name : '时间',
                    splitNumber:4,
                    data : ['1s','2s','3s','4s']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLine:{
                        show:false
                    },
                    axisLabel:{
                        inside:true,
                        textStyle:{
                            color:"#fff"
                        }
                    },
                    splitNumber:3
                }
            ],
            //图形的颜色组
            color:['rgb(255,255,255)','rgb(67,205,126)'],
            //需要显示的图形名称，类型，以及数据设置
            series : [
                {
                    name:'流量',
                    //默认显
                    type:'line',
                    data:this.state.apple
                }
            ]
        };
        return (
            <View style={[styles.flex, styles.bgcolor]}>
                <Head title="流 量" list={lists} navigate={navigate} ref="head"> </Head>
                <View style={styles.flex}>
                    <ScrollView style={styles.ztScroll}>
                        <TouchableOpacity activeOpacity={1} onPress={() => this.refs.head.hideMenu()}>
                        <View style={styles.floWrap}>
                            <View style={styles.flowInfo}>
                                <View style={styles.flowText}>
                                    <Text style={[styles.flowFont,styles.flowFontLe]}>信道：</Text>
                                    <Text style={styles.flowFont}>2.4GHZ</Text>
                                </View>
                                <View style={styles.flowText}>
                                    <Text style={[styles.flowFont,styles.flowFontLe]}>速率：</Text>
                                    <Text style={styles.flowFont}>45Mbps</Text>
                                </View>
                                <View style={styles.flowText}>
                                    <Text style={[styles.flowFont,styles.flowFontLe]}>端口IP：</Text>
                                    <Text style={styles.flowFont}>192.168.1.200</Text>
                                </View>
                            </View>
                            <View>
                                <Echarts option={option} height={5*rem} width={7.5*rem}/>
                            </View>
                        </View>
                        </TouchableOpacity>
                    </ScrollView>
                </View>
            </View>
        );
    }
}